<template>
  <!-- 底部导航 -->
  <div id="nav" v-if="$route.meta.isFooter">
    <!-- 轻聊 -->
    <router-link class="tab-bar-item" to="/">
      <div class="icon-box"><i class="iconfont icon-liaotian"></i></div>
      <div>轻聊</div>
      <div class="mark" v-if="commonStore.unreadNotifyTotal > 0">{{ commonStore.unreadNotifyTotal }}</div>
    </router-link>


    <!-- 通讯录 -->
    <router-link class="tab-bar-item" to="/addressBook">
      <div class="icon-box"><i class="iconfont icon-tongxunlu"></i></div>
      <div>通讯录</div>
      <div class="mark" v-if="commonStore.friendApplyTotal > 0">{{ commonStore.friendApplyTotal }}</div>
    </router-link>


    <!-- 发现 -->
    <router-link class="tab-bar-item" to="/discover">
      <div class="icon-box"><i class="iconfont icon-faxian"></i></div>
      <div>发现</div>
    </router-link>


    <!-- 我的 -->
    <router-link class="tab-bar-item" to="/me">
      <div class="icon-box"><i class="iconfont icon-wode"></i></div>
      <div>我的</div>
    </router-link>
  </div>

  <!-- 主体内容 -->
  <router-view/>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { initSocketIO, setQuery } from './utils/socketIO'
import { useUserStore } from './store/modules/user'

// 用户存储
const userStore = useUserStore()

onMounted(() => {
  console.log(' ------------- app onMounted ------------- ')
  if (userStore.profile) {
    // 设置 socket.io 参数
    setQuery({
        token: userStore.profile.token,
        uid: userStore.profile.user.uid,
        username: userStore.profile.user.username,
        group: 'trident'
    })

    // 初始化socket.io 连接
    initSocketIO(import.meta.env.VITE_PHP_SOCKET_IO_SERVER)
  }
})

// onUpdated(() => {
//   console.log(' ------------- app onUpdated ------------- ')
// })
</script>

<style lang="scss">
@import "assets/css/base.css";
#nav {
  background-color: #F6F6F6;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -3px 1px rgba(100, 100, 100, 0.1);
  a {
    color: var(--color-text);

    &.router-link-exact-active {
      color: #27BA9B;
    }
  }
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 50px;
    font-size: var(--font-size);
    .icon-box{
      width: 24px;
      height: 24px;
      margin-top: 3px;
      margin-bottom: 2px;
      vertical-align: middle;
      display: inline-block;
      .iconfont {
        font-size: 24px;
      }
    }

    position: relative;

    .mark {
      background-color: red;
      position: absolute;
      width: 16px;
      height: 16px;
      line-height: 16px;
      border-radius: 8px;
      top: 0px;
      right: 25px;
      color: #fff;
      text-align: center;
      font-size: 10px;
    }
  }
}

.ellipsis-2{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ellipsis-1{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
